<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-layout-popuptype" style="display:;" *ngIf="modalShowFl">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
            	<span class="ddp-txt-title-name">
                {{'msg.mem.ui.update.title' | translate: {value: getUserName()} }}
                </span>
      <div class="ddp-ui-pop-buttons">
        <a href="javascript:" class="ddp-btn-pop" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" (click)="done()">{{'msg.comm.btn.done' | translate}}</a>
      </div>
      <!-- det -->
    </div>
    <!-- //title -->
    <div class="ddp-ui-popup-contents">

      <div class="ddp-wrap-share-set">
        <!-- left -->
        <div class="ddp-ui-left">
          <div class="ddp-wrap-switch">
            <!-- 검색 -->
            <div class="ddp-form-search">
              <em class="ddp-icon-search"></em>
              <input type="text" placeholder="{{'msg.mem.ui.update.search.ph' | translate}}"
                     (keypress)="onSearchText($event)"
                     (keyup.esc)="onSearchTextInit()"
                     [ngModel]="searchKeyword">
              <em class="ddp-btn-search-close" *ngIf="searchKeyword" (click)="onSearchTextInit()"></em>
            </div>
            <!-- //검색 -->
          </div>
          <!-- member -->
          <div class="ddp-ui-member">
            <ul class="ddp-list-checktype">
              <li class="ddp-all">
                <label class="ddp-label-checkbox" (click)="onClickAllGroup()">
                  <input type="checkbox" [checked]="isAllSelectedGroup()">
                  <i class="ddp-icon-checkbox"></i>
                  <span class="ddp-txt-checkbox">{{'msg.comm.ui.list.all' | translate}} ({{groupList.length}} / {{pageResult.totalElements}})</span>
                </label>
              </li>
              <li *ngFor="let group of groupList">
                <label class="ddp-label-checkbox" (click)="onSelectedGroup(group)">
                  <input type="checkbox" [checked]="isSelectedGroup(group)">
                  <i class="ddp-icon-checkbox"></i>
                  <span class="ddp-txt-checkbox">{{group.name}}</span>
                </label>
              </li>
            </ul>
          </div>
          <!-- //member -->
          <div class="ddp-ui-moretype" *ngIf="isMoreGroupList()">
            <a href="javascript:" class="ddp-btn-moretype" (click)="onClickMoreGroupList()">{{'msg.mem.btn.update.more' | translate}}</a>
          </div>
        </div>
        <!-- //left -->
        <!-- right -->
        <div class="ddp-ui-right ddp-wrap-member-table">
          <!-- 멤버 -->
          <div class="ddp-ui-member-table">
            <span class="ddp-data-total2">{{'msg.mem.ui.update.sel.count' | translate: {value: selectedGroup.length} }}</span>
            <div class="ddp-box-viewtable2 ddp-user">
              <!-- head -->
              <div class="ddp-ui-gridhead2">
                <table class="ddp-table-form2">
                  <colgroup>
                    <col width="*">
                    <col width="30px">
                  </colgroup>
                  <thead>
                  <tr>
                    <th colspan="2">
                      {{'msg.mem.th.update.groupname' | translate}}
                    </th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!-- //head -->
              <!-- body -->
              <div class="ddp-ui-gridbody2">
                <table class="ddp-table-form2 ddp-long">
                  <colgroup>
                    <col width="*">
                    <col width="30px">
                  </colgroup>
                  <tbody>
                  <tr *ngFor="let group of getSelectedGroupList()">
                    <td>
                      <em class="ddp-icon-group"></em>{{group.name}}
                      <span class="ddp-data-note" *ngIf="group.note">({{group.note}})</span>
                    </td>
                    <td class="ddp-table-icons" (click)="deleteSelectedGroup(group)">
                      <em class="ddp-icon-sclose"></em>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <!-- //body -->
            </div>
            <div class="ddp-ui-moretype" *ngIf="isMoreSelectedGroupList()">
              <a href="javascript:" class="ddp-btn-moretype" (click)="onClickMoreSelectedGroupList()">{{'msg.mem.btn.update.more' | translate}}</a>
            </div>
          </div>
          <!-- //멤버 -->

        </div>
        <!-- right -->

      </div>


    </div>

  </div>
</div>
